<template>
  <el-dialog
    :title="deptForm.id ? '编辑部门': '新增部门'"
    :visible="showDialog"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="deptForm" :model="deptForm" :rules="rdtpRules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="请输入部门名称" size="mini" style="width:80%" />
      </el-form-item>
      <el-form-item label="部门类型" prop="type">
        <el-select v-model="deptForm.type" placeholder="请选择部门类型" size="mini">
          <el-option label="分公司" value="分公司" />
          <el-option label="部门" value="部门" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerName">
        <el-select v-model="deptForm.managerName" placeholder="请选择部门负责人" size="mini">
          <el-option label="张三三" value="张三三" />
          <el-option label="李四四" value="李四四" />
          <el-option label="何笑笑" value="何笑笑" />
          <el-option label="李维" value="李维" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门描述" prop="introduce">
        <el-input v-model="deptForm.introduce" type="textarea" size="mini" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: null
    },
    id: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      deptForm: {
        name: '',
        type: '',
        managerName: '',
        introduce: '',
        member: 20,
        createTime: +new Date()
      },
      rdtpRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择部门类型', trigger: 'blur' }

        ],
        managerName: [
          { required: true, message: '请选择部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门描述', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose', false)
      this.$refs.deptForm.resetFields()
      this.deptForm = {
        name: '',
        type: '',
        managerName: '',
        introduce: ''
      }
    },
    submitForm() {
      this.$refs.deptForm.validate(valid => {
        if (!valid) return
        if (this.deptForm.id) {
          axios({
            method: 'put',
            url: `http://localhost:3000/department/${this.deptForm.id}`,
            data: this.deptForm
          }).then(() => {
            this.$message.success('修改成功')
            this.handleClose()
          })
        } else {
          axios({
            method: 'post',
            url: 'http://localhost:3000/department',
            data: { ...this.deptForm, pid: this.id }
          })
          console.log(this.id)
          this.$message.success('添加成功')
          this.handleClose()
        }
      })
    },
    getDepartmentDetail() {
      axios({
        method: 'get',
        url: `http://localhost:3000/department/${this.id}`
      }).then(res => {
        this.deptForm = res.data
      })
    }
  }
}
</script>

<style>

</style>
